<template>
    <div>
      <Header :left="true" leftText="返回" title="发起争议" />
      <div>
        <van-row style="margin-top: 80px">
          <van-col
            ><van-image
              width="40"
              height="30"
              style="margin-left: -10px"
              src="assets/block.png"
          /></van-col>
          <van-col class="message">多媒体信息</van-col>
        </van-row>
      </div>
      <!-- 多媒体信息 -->
      <div class="divMedia">
        <van-row style="margin-top: 10px">
          <van-col
            span="4"
            style="
              font-weight: bold;
              color: #a9a9a9;
              margin-left: 10px;
              margin-top: 8px;
            "
            >视频：</van-col
          >
          <van-col span="14" style="color: #a9a9a9">
            <!-- 循环显示视频 -->
            <div
              v-show="vedioShow"
              v-for="item in vedioList"
              :key="item.id"
              style="margin-left: -10px"
            >
              <van-image
                style="float: left"
                width="50"
                height="40"
                @click="playVedio(item.filePath)"
                src="assets/vedio.png"
              />
            </div>
          </van-col>
        </van-row>
        <van-divider style="margin-top: 0px" />
        <van-row style="margin-top: 10px">
          <van-col
            span="3"
            style="
              font-weight: bold;
              color: #a9a9a9;
              margin-left: 10px;
              margin-top: 8px;
            "
            >照片：</van-col
          >
          <van-col span="14" style="color: #a9a9a9"
            ><van-uploader
              v-show="photoShow"
              v-model="photoList"
              :deletable="false"
              multiple
              :max-count="pictureNum"
          /></van-col>
        </van-row>
        <van-divider style="margin-top: 0px" />
        <van-row style="margin-top: 10px">
          <van-col
            span="4"
            style="
              font-weight: bold;
              color: #a9a9a9;
              margin-left: 10px;
              margin-top: 8px;
            "
            >语音：</van-col
          >
          <van-col span="14" style="color: #a9a9a9">
            <div
              v-show="audioShow"
              @click="playArm"
              style="
                background-color: #00ff33;
                width: 140px;
                height: 35px;
                margin-left: -10px;
              "
            >
              <van-image
                v-show="audioStop"
                width="40"
                height="30"
                style="margin-right: 3px; float: left"
                src="assets/voice.png"
              >
              </van-image>
              <van-loading v-show="audioLoad" style="float: center" color="white"
                ><span style="color: white; font-size: 15px"
                  >播放中...</span
                ></van-loading
              >
            </div>
          </van-col>
        </van-row>
      </div>
  
      <div>
        <!-- 标签 -->
        <van-row style="margin-top: 10px">
          <van-col
            ><van-image
              width="40"
              height="30"
              style="margin-left: -10px"
              src="assets/block.png"
          /></van-col>
          <van-col class="message">维修信息</van-col>
        </van-row>
      </div>
      <!-- 分割线 -->
      <div style="background-color: #f5f5f5; height: 5px"><span></span></div>
      <!-- 数据信息 -->
      <div class="divMessage">
        <!-- <Field
          v-model="form.requestCode"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#FF7F50;height:40px;"
          center
          colon
          label="报修单号"
        /> 
        <Field
          v-model="form.repairCode"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#A9A9A9;height:40px;"
          center
          colon
          label="维修单号"
        />
        <Field
          v-model="form.equipName"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#A9A9A9;height:40px;"
          center
          colon
          label="设备编码"
        />-->
        <Field
          v-model="form.equipDesc"
          :readonly="true"
          size="small"
          style="font-weight: bold; color: #a9a9a9; height: 40px"
          center
          colon
          label="设备名称"
        />
        <Field
          v-model="form.requestUser"
          :readonly="true"
          size="small"
          style="font-weight: bold; color: #a9a9a9; height: 40px"
          center
          colon
          label="报修人"
        />
        <Field
          v-model="form.requestTime"
          :readonly="true"
          size="small"
          style="font-weight: bold; color: #a9a9a9; height: 40px"
          center
          colon
          label="报修时间"
        />
        <Field
          v-model="form.checkUser"
          :readonly="true"
          size="small"
          style="font-weight: bold; color: #a9a9a9; height: 40px"
          center
          colon
          label="维修人"
        />
        <Field
          v-model="form.endTime"
          :readonly="true"
          size="small"
          style="
            font-weight: bold;
            color: #a9a9a9;
            height: 40px;
            white-space: nowrap;
          "
          center
          colon
          label="维修完成时间"
        />
        <!-- <Field size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
          center colon label="维修类型">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">抢修</van-radio>
            <van-radio name="2">并修</van-radio>
          </van-radio-group>
        </Field> -->
        <Field
          v-model="form.totalmaintenancetime"
          :readonly="true"
          size="small"
          style="
            font-weight: bold;
            color: #a9a9a9;
            height: 40px;
            white-space: nowrap;
          "
          center
          colon
          label="总维修时长"
        />
        <Field
          v-model="form.orderreceivingtime"
          :readonly="true"
          size="small"
          style="
            font-weight: bold;
            color: #a9a9a9;
            height: 40px;
            white-space: nowrap;
          "
          center
          colon
          label="接单时长"
        />
        <Field
          v-model="form.waitingtime"
          :readonly="true"
          size="small"
          style="
            font-weight: bold;
            color: #a9a9a9;
            height: 40px;
            white-space: nowrap;
          "
          center
          colon
          label="等待时长"
        />
        <Field
          v-model="form.concurrentrepairtime"
          :readonly="true"
          size="small"
          style="
            font-weight: bold;
            color: #a9a9a9;
            height: 40px;
            white-space: nowrap;
          "
          center
          colon
          label="并修时长"
        />
      </div>
  
      <van-divider content-position="left">确认并修时长（小时）</van-divider>
      <van-stepper style="margin-left: 15%"  step="0.1" :decimal-length="1" v-model="value" />
  
      <!-- <div v-show="radiogroup">
        <van-divider content-position="left">并行总时长占比</van-divider>
        <van-radio-group
          style="margin-left: 10%"
          v-model="radio1"
          direction="horizontal"
        >
          <van-radio name="1">1/5</van-radio>
          <van-radio name="2">2/5</van-radio>
          <van-radio name="3">3/5</van-radio>
          <van-radio name="4">4/5</van-radio>
          <van-radio name="5">5/5</van-radio>
        </van-radio-group>
      </div> -->
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 底部按钮 -->
      <van-button
        :block="true"
        @click="repairNoPass"
        color="#ed1941"
        class="buttonStart"
        type="primary"
        text="审核不通过"
      />
      <van-button
        :block="true"
        @click="repairPass"
        cplor="#138087"
        class="buttonEnd"
        type="primary"
        text="审核通过"
      />
    </div>
  </template>
  <script>
  import {
    Icon,
    Button,
    CellGroup,
    Cell,
    Field,
    Loading,
    tab,
    Uploader,
    tabs,
    Col,
    Row,
    Image as VanImage,
    Divider,
    Checkbox,
    Pagination,
    Panel,
    Toast,
    Dialog,
    popup,
    Picker,
    RadioGroup,
    Radio,
    Form,
    Stepper
  } from "vant";
  import { _httpClient } from "@/libs/api";
  import { storage } from "@/libs/utils";
  import {
    removeToken,
    getToken,
    setBaseApiFrefix,
    getBaseApiFrefix,
  } from "@/libs/auth";
  Vue.use(Cell);
  Vue.use(CellGroup);
  Vue.use(tab);
  Vue.use(tabs);
  Vue.use(Button);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Icon);
  Vue.use(VanImage);
  Vue.use(Divider);
  Vue.use(Checkbox);
  Vue.use(Pagination);
  Vue.use(Panel);
  Vue.use(Dialog);
  Vue.use(Picker);
  Vue.use(popup);
  Vue.use(Uploader);
  Vue.use(Loading);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(Form);
  Vue.use(Stepper);
  import Header from "@/components/header.vue";
  import apicloud from "@/libs/apicloud";
  export default {
    components: {
      Divider,
      Button,
      Header,
      Icon,
      CellGroup,
      Cell,
      Field,
      tab,
      tabs,
      Col,
      Row,
      Picker,
      Radio,
      RadioGroup,
      Form,
      Stepper
    },
  
    data() {
      return {
        value:1,
        radiogroup: false,
        radio: "1",
        radio1: "1",
        btnLoading: false,
        winName: "", //窗口名
        user: [], //当前登录用户
        //多媒体文件
        photoList: [
          //图片
        ],
        pictureNum: 0, //照片数量
        playing: "播放中...", //语音播放中字幕
        audioLoad: false, // 语音播放中
        audioStop: true, // 语音暂停
        photoShow: false, //照片显示控制
        vedioShow: false, //视频显示控制
        audioShow: false, //语音显示控制
        vedioList: [], //视频
        audioPath: "", //语音
  
        sourceShowPicker: false,
        allSelected: false,
        selectFont: "一键勾选",
        screenWidth: 0,
        checked: true,
        active: 2,
        currentPage: 1,
        fileUrl: "",
        form: {
          atrKey: "", //工厂Key
          eqKey: "", //设备Key
          requestCode: "", //报修单号
          repairCode: "", //维修单编号
          equipId: "设备编码", //设备编码
          equipName: "注塑机", //设备名称
          requestUser: "测试账户", //报修人
          requestTime: "2020-12-03 15:52:00", //报修时间
          exmainUser: "测试账户", //审核人
          exmainTime: "2020-12-03 15:52:00", //审核时间
          executeUser: "测试账户", //执行人
        },
        columns: [{ fault_key: "1", fault_value: "机械故障" }],
      };
    },
    created: function () {
      let oldHight = api.winWidth;
      this.screenWidth = oldHight;
  
      this.form = api.pageParam.equip;
  
      this.value = this.form.sureconcurrentrepairtime;
      if (this.form.mergetype == "抢修") {
        this.radio = "1";
        this.radiogroup = false;
      } else {
        this.radio = "2";
        this.radiogroup = true;
      }
      let tkn = getToken();
      if (!tkn) {
        api.openWin({
          name: "login",
          url: "./login-login.html",
          rect: {
            x: 0,
            y: 150,
            w: api.winWidth,
            h: api.winHeight,
          },
        });
      }
      //页面赋值
      this.form = api.pageParam.equip;
      // alert(this.form.id)
      //初始化查询多媒体信息
      this.queryFileById();
    },
    methods: {
      clstab() {
        //alert(this.radio);
        if (this.radio == 1) {
          this.radiogroup = false;
        } else {
          this.radiogroup = true;
        }
      },
      //视频播放
      playVedio(filePath) {
        let that = this;
        if (
          api.deviceName.toLowerCase() == "vivo" ||
          api.deviceName.toLowerCase() == "oppo" ||
          api.deviceName.toLowerCase() == "honor"
        ) {
          var videoPlayer = api.require("videoPlayer");
          videoPlayer.play(
            {
              path: filePath.trim(),
              autoPlay: true,
            },
            function (ret, err) {}
          );
        } else {
          that.$ac.openVideo({
            url: filePath.trim(),
          });
        }
      },
  
      //语音播放
      playArm() {
        //判断是播放还是暂停
        if (!this.audioLoad) {
          this.audioLoad = true;
          this.audioStop = false;
          if (this.audioPath == "") {
            Dialog.alert({
              message: "当前无语音信息",
              theme: "round-button",
            }).then(() => {
              // on close
            });
          }
          var audioStreamer = api.require("audioStreamer");
          let _this = this;
          audioStreamer.addEventListener({}, function (ret) {
            if (ret.state == "finished") {
              _this.audioLoad = false;
              _this.audioStop = true;
            }
          });
          audioStreamer.openPlayer(
            {
              path: _this.audioPath,
            },
            function (ret) {
              // if (ret.status) {
              //   api.alert({ msg: JSON.stringify(ret) })
              // }
            }
          );
        } else {
          var audioStreamer = api.require("audioStreamer");
          audioStreamer.pause();
          this.audioLoad = false;
          this.audioStop = true;
        }
      },
      //未修好
      repairNoPass() {
        let _this = this;
        Dialog.confirm({
          title: "提示",
          theme: "round-button",
          message: "是否确认当前报修单未修理好?",
        })
          .then(() => {
            //点击确定，继续执行后续操作
            this.repairNoPassExecute();
          })
          .catch(() => {});
      },
  
      //已维修好
      repairPass() {
        let _this = this;
        Dialog.confirm({
          title: "提示",
          message: "是否确认当前报修单已修理好?",
          theme: "round-button",
        })
          .then(() => {
            //点击确定，继续执行后续操作
            _this.repairPassExecute();
          })
          .catch(() => {});
      },
  
      //未维修好，执行
      async repairNoPassExecute() {
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        try {
          let res = await _httpClient.post(
            _httpClient.getApiPrefix() +
              "/app/repair/repairInfo/updateRepairCheckStatus",
            {
              body: { id: _this.form.id, status: "4" },
            }
          );
          if (res.code === 200) {
            Toast.clear();
            Dialog.alert({
              message: res.msg,
              theme: "round-button",
            }).then(() => {});
  
            _this.form.status = "4";
            api.sendEvent({
              name: "result",
              extra: {
                item: _this.form,
              },
            });
            api.closeWin();
          } else {
            Toast.clear();
            Dialog.alert({
              message: res.msg,
              theme: "round-button",
            }).then(() => {});
          }
        } catch (e) {
          alert(JSON.stringify(e));
          Toast.fail(JSON.stringify(e));
        }
      },
  
      //维修好，执行
      async repairPassExecute() {
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        var value1 = "";
        var value2 = "";
        if (_this.radio == "1") {
          value1 = "抢修";
        } else {
          value1 = "并修";
        }
        switch (_this.radio1) {
          case "1":
            value2 = "0.2";
            break;
          case "2":
            value2 = "0.4";
            break;
          case "3":
            value2 = "0.6";
            break;
          case "4":
            value2 = "0.8";
            break;
          case "5":
            value2 = "1";
            break;
        }
        try {
          let res = await _httpClient.post(
            _httpClient.getApiPrefix() +
              "/app/repair/repairInfo/updateRepairCheckStatus",
            {
              body: {
                id: _this.form.id,
                status: "5",
                mergetype: value1,
                mergescale: value2,
              },
            }
          );
          if (res.code === 200) {
            Toast.clear();
            Dialog.alert({
              message: res.msg,
              theme: "round-button",
            }).then(() => {});
  
            _this.form.status = "5";
            //维修完成，关闭当前页面
            api.sendEvent({
              name: "result",
              extra: {
                item: _this.form,
              },
            });
            api.closeWin();
          } else {
            Toast.clear();
            Dialog.alert({
              message: res.msg,
              theme: "round-button",
            }).then(() => {});
          }
        } catch (e) {
          alert(JSON.stringify(e));
          Toast.fail(JSON.stringify(e));
        }
      },
      //查询维修单多媒体信息
      async queryFileById() {
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        try {
          let res = await _httpClient.post(
            _httpClient.getApiPrefix() +
              "/app/repair/requestFile/selectRepairFiles",
            {
              body: { requestId: _this.form.id },
            }
          );
  
          if (res.code === 200) {
            Toast.clear();
            if (res.rows.length > 0) {
              //筛选图片、视频、录音
              let pictures = [];
              let vedios = [];
              let audios = [];
              for (let i = 0; i < res.rows.length; i++) {
                if (res.rows[i].fileType == "0") {
                  //照片
                  let paths = res.rows[i].filePath.split(";");
                  for (let j = 0; j < paths.length; j++) {
                    let num = 0;
                    if (paths[j] != "") {
                      let picture = { url: paths[j] };
                      pictures.push(picture);
                      num++;
                    }
                    _this.pictureNum = num;
                  }
                  //显示照片
                  _this.photoShow = true;
                } else if (res.rows[i].fileType == "1") {
                  let paths = res.rows[i].filePath.split(";");
                  for (let j = 0; j < paths.length; j++) {
                    if (paths[j] != "") {
                      let vedio = { filePath: paths[j] };
                      _this.vedioList.push(vedio);
                    }
                  }
                  //视频
                  // _this.vedioList.push(res.rows[i])
                  _this.vedioShow = true;
                } else if (res.rows[i].fileType == "2") {
                  //语音
                  let paths = res.rows[i].filePath.split(";");
                  for (let j = 0; j < paths.length; j++) {
                    if (paths[j] != "") {
                      _this.audioPath = paths[j];
                      _this.audioShow = true;
                      break;
                    }
                  }
                  // if (_this.audioPath == '') {
                  //   _this.audioPath = res.rows[i].filePath
                  //   _this.audioShow = true
                  // }
                }
              }
              _this.photoList = pictures; //照片数组赋值
            }
          } else {
            Toast.fail(res.msg);
          }
        } catch (e) {
          Toast.clear();
          alert(JSON.stringify(e));
        }
      },
    },
  };
  </script>
  <style>
  body {
    background-color: White;
  }
  
  .clickbtn {
    width: 1;
    margin: 5px 10px;
    line-height: 45px;
    border: 1px #ccc dashed;
    text-align: center;
  }
  
  .buttonRight {
    position: fixed;
    margin-top: -40px;
    right: 10px;
    width: 85px;
    height: 40px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
  }
  
  .buttonStart {
    position: fixed;
    bottom: 3px;
    left: 5px;
    width: 45%;
    height: 30px;
    background-color: #ff9933;
    border-color: #ff9933;
    font-size: 12px;
  }
  
  .buttonEnd {
    position: fixed;
    bottom: 3px;
    right: 5px;
    width: 45%;
    height: 30px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
    font-size: 12px;
  }
  
  .message {
    font-size: 15px;
    margin-top: 5px;
    margin-left: -10px;
    font-weight: bold;
  }
  
  .divStyle {
    border: 1px solid #dcdcdc;
    border-top-width: 3px;
    border-left-width: 3px;
    margin-left: 5px;
    margin-right: 4px;
    margin-top: 4px;
  }
  
  .pagination {
    position: fixed;
    bottom: 15px;
    width: 300px;
    margin-left: 10%;
    color: rgb(0, 0, 255);
    text-align: center;
  }
  
  .divMedia {
    margin-top: 0px;
    height: 230px;
    border: solid #dcdcdc;
    margin-left: 5px;
    margin-right: 15px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
  
  .divMessage {
    margin-top: 0px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
  </style>
  